<template>
  <div class="list">
    <van-divider>{{
      this.$route.query.name ? this.$route.query.name : "热卖"
    }}</van-divider>
    <van-cell-group>
      <van-field v-model="value" label="搜索" placeholder="请输入关键字检索" />
    </van-cell-group>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="(item, index) in searchGoods"
        :tag="index + 1 + ''"
        :key="item.id"
        :num="item.amount"
        :price="item.price.toFixed(2)"
        :desc="item.desc"
        :title="item.name"
        :thumb="item.coverImage | imgUrl"
        @click="toDetail(item.id)"
      ></van-card>
    </van-list>
  </div>
</template>

<script>
import { loadGoods } from "../services/goods";
export default {
  data() {
    return {
      goods: [],
      loading: false,
      finished: false,
      page: 1,
      value: "",
    };
  },
  methods: {
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
    onLoad() {
      this.page++;
      if (this.page >= 5) {
        this.finished = true;
        return;
      } else {
        loadGoods(this.page, this.$route.query?.id).then((res) => {
          this.goods.push(...res.data);
          this.loading = false;
        });
      }
    },
  },
  computed: {
    searchGoods() {
      return this.goods.filter((item) => item.name.indexOf(this.value) > -1);
    },
  },
  created() {
    loadGoods(this.page, this.$route.query?.id).then((res) => {
      this.goods.push(...res.data);
    });
  },
};
</script>

<style></style>
